<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>2.style样式的绑定</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			绑定style样式
					:style="str"其中str是包含一整段样式的字符串（这种写法很恶心，一般不会这么干的）
					:style="obj"其中obj是样式对象。
					:style="arr"其中arr是包含样式对象的数组。
		 -->
		<!-- 准备好一个容器-->
		<div id="demo">
			<!-- 绑定style样式的第一种形式：字符串形式（了解即可） -->
			<h2 :style="str">你好啊</h2>

			<!-- 绑定style样式的第二种形式：对象形式（常用！） -->
			<h2 :style="obj">你好啊</h2>

			<!-- 绑定style样式的第三种形式：数组形式（了解即可） -->
			<h2 :style="arr">你好啊</h2>
		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false

			new Vue({
				el:'#demo',
				data:{
					str:'font-size: 60px; color: red;',
					obj:{
						fontSize:'60px',
						color:'red'
					},
					arr:[
						{
							fontSize:'60px',
							color:'red'
						},
						{
							backgroundColor:'skyblue'
						}
					]
				}
			})
			
		</script>
	</body>
</html>